<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Page Title</title>
		<style type="text/css" media="screen">
			textarea {
				line-height: 16px;
/*				overflow-y: hidden;*/
			}
		</style>
		<script type="text/javascript" charset="utf-8">
			
			function resize(e) {
				var startTime = new Date();
				var sText = document.getElementById('text').value;
				var iLength = sText.length;

				// если текст очень большой - ничего полезного не делать
				if (iLength < 100 * 1024) {
					var sHeight = (sText.split(/\n/).length + 4) * 16 + "px";
					document.getElementById('text').style.height = sHeight;
				} else {
					// TODO: убрать стиль overflow-y: hidden;
					// и не забыть поставить обратно.
				}
				
				document.getElementById('info_1').innerHTML = (new Date() - startTime.getTime()) / 1000 + " c";
				document.getElementById('info_2').innerHTML = iLength;
			}
			
			function onKeypress(e) {
				var iKeyCode;
				if(e && window.event) iKeyCode = e.keyCode; // IE
				else if(e && e.which) iKeyCode = e.which;   // Netscape/Firefox/Opera
				
				// лишний раз делаю пересчеты если был нажат enter или backspace...
				if (iKeyCode == 13 || iKeyCode == 8)
					return resize(e);
					
				// ... или если был выделен какой-то текст
				// TODO: сделать нормально (текст-то мне не нужен)
				// FEXME: в FF выделение сбрасывается сразу же по onkeypress, и тут его не отловить...
				var selected;
				if (window.getSelection) selected = window.getSelection().toString();      
				else if (document.getSelection) selected = document.getSelection();                
				else if (document.selection) selected = document.selection.createRange().text;
				if (selected) return resize(e);
			}
			function onKeyup(e) {
				return resize(e);
			}
			
		</script>
	</head>
	<body>
		<form method="get" accept-charset="utf-8">
			<p><textarea id="text" name="text" onkeypress="return onKeypress(event)" onkeyup="return onKeyup(event)" wrap="off" rows="8" cols="85"></textarea></p>
			<p><textarea wrap="off" rows="4" cols="85"></textarea></p>
			<p><input type="button" value="Show text" onclick="alert('=' + document.getElementById('text').value + '=')"></p>
			<p><input type="submit" value="Continue &rarr;"></p>
		</form>
		<div id="info_1"></div>
		<div id="info_2"></div>
		
		<script type="text/javascript" charset="utf-8">
			resize();
		</script>
		
	</body>
</html>